<template>
  <div class="login">
    <!-- 遮罩 -->
    <van-overlay @click="show = false"></van-overlay>
    <!-- 登陆 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 20px 30px 0">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
      username: "",
      password: "",
      userInfo: [], //用户信息
    };
  },
  methods: {
    // 登陆
    onSubmit(values) {
      // 弹出成功提示框
      this.$toast.success("登陆成功");
      this.show = false;
      // token，userInfo存本地
      sessionStorage.setItem("user", JSON.stringify(values))
      // 刷新
      this.$router.go(0);
      this.$router.back();
    },
    
  },
};
</script>
<style lang="less" scoped>
.login {
  background: #bbb;
  color: #fff;
  height: 800px;
  padding: 20px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
.van-grid-item {
  margin: 20px 0;
}
.van-form {
  position: absolute;
  width: 90%;
  padding: 30px 0;
  z-index: 99;
  top: 50%;
  left: 50%;
  background: white;
  transform: translate(-50%, -50%);
}
</style>
